<!-- 管理员:课程考核管理:题库和在线考试管理:在线考试 -->
<template>
  <div>
    <div style="width:100% !important;padding:20px;"
         v-show="StartExaminationShow">
      <div>
        <el-row type="flex"
                align="middle">
          <el-form inline="true"
                   label-suffix="：">
            <el-form-item label="状态">
              <el-select v-model="queryForm.semester"
                         size="mini"
                         placeholder="请选择"
                         style="width:100px;">
                <el-option v-for="item in semesterArray"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程名称">
              <el-input v-model="queryForm.name"
                        size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button plain
                         size='mini'
                         icon="el-icon-search"
                         type="primary"
                         style="width:70px;">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-table :data="tableData"
                  border
                  class="table-data"
                  row-class-name="dun-row-class"
                  cell-class-name="dun-cell-class"
                  header-row-class-name="dun-header-row-class"
                  header-cell-class-name="dun-header-cell-class"
                  :cell-style="{ borderColor: '#004ca7'}"
                  :header-cell-style="{ borderColor: '#004ca7', backgroundColor: '#eef1f9'}">
          <el-table-column type="selection"
                           width="55"
                           align="center" />
          <el-table-column prop="clazzName"
                           label="考试课程"
                           align="center" />
          <el-table-column prop="clazzName"
                           label="考试编号"
                           align="center" />
          <el-table-column prop="clazzName"
                           label="培养层次"
                           align="center" />
          <el-table-column prop="clazzName"
                           label="考试班级"
                           align="center" />
          <el-table-column prop="clazzName"
                           label="开始时间"
                           align="center" />
          <el-table-column prop="clazzName"
                           label="结束时间"
                           align="center" />
          <el-table-column prop="clazzName"
                           label="状态"
                           align="center" />
          <el-table-column prop="clazzName"
                           label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="24">
                  <el-button :plain=true
                             size="mini"
                             type="warning"
                             style="width:140px;height:28px;"
                             @click="StartExamination"
                             icon="el-icon-edit">开始考试</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagineDescPane">
          当前共找到 {{ resultPagin.totalCount }} 条记录，当前显示 {{ resultPagin.start }} - {{ resultPagin.end }} 条。
        </div>
        <div class="pagineBtnPane">
          <el-button style="width:80px;"
                     size='mini'>＜ 上一页</el-button>
          <el-button size='mini'>1</el-button>
          <el-button size='mini'>…</el-button>
          <el-button size='mini'>30</el-button>
          <el-button size='mini'>…</el-button>
          <el-button size='mini'>60</el-button>
          <el-button style="width:80px;"
                     size='mini'>下一页 ＞</el-button>
          <span style="display:inline-block;width:40px;"></span>
          前往
          <el-input size='mini'
                    style="display:inline-block;width:40px;" /> 页
        </div>
      </div>
      <el-dialog :title="clazzDialog.dialogTitle"
                 :visible.sync="clazzDialog.dialogVisible"
                 :close-on-click-modal=false
                 :show-close=false
                 :center=true
                 :close-on-press-escape=false
                 width="70%">
        <el-form label-position="right"
                 label-width="10px"
                 label-suffix="：">
          <table style="width:100%;border-collapse:separate;border-spacing:1px;background-color:#95b4db;"
                 class="el-table--fit el-table--border table-data">
            <tr>
              <td class="form-label"><span>培养层次：</span></td>
              <td class="form-item"
                  colspan="3">
                <el-select size="mini"
                           v-model="clazzDialog.xq"
                           placeholder="请选择">
                  <el-option v-for="item in xqList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="form-label"><span>考试课程：</span></td>
              <td class="form-item">
                <el-input size="mini" />
              </td>
              <td class="form-label"><span>考试编号：</span></td>
              <td class="form-item">
                <el-input size="mini" />
              </td>
            </tr>
            <tr>
              <td class="form-label"><span>考试类型：</span></td>
              <td class="form-item">
                <el-input size="mini" />
              </td>
              <td class="form-label"><span>考试班级：</span></td>
              <td class="form-item">
                <el-input size="mini" />
              </td>
            </tr>
            <tr>
              <td class="form-label"><span>试卷类型：</span></td>
              <td class="form-item">
                <el-input size="mini" />
              </td>
              <td class="form-label"><span>试卷编号：</span></td>
              <td class="form-item">
                <el-input size="mini" />
              </td>
            </tr>
            <tr>
              <td class="form-label"><span>考试人数：</span></td>
              <td class="form-item">
                <el-input size="mini" />
              </td>
              <td class="form-label"><span>报考人数：</span></td>
              <td class="form-item">
                <el-input size="mini" />
              </td>
            </tr>
            <tr>
              <td class="form-label"><span>考试开始时间：</span></td>
              <td class="form-item">
                <el-date-picker v-model="clazzDialog.startDate"
                                type="date"
                                size="mini"
                                style="width:18vh;"
                                placeholder="选择日期">
                </el-date-picker>
                <span style="display:inline-block;width:4vh;"></span>
                <el-time-select size="mini"
                                style="width:15vh;"
                                v-model="clazzDialog.startTime"
                                :picker-options="{
        start: '08:00',
        step: '00:10',
        end: '20:30'
      }"
                                placeholder="选择时间">
                </el-time-select>
              </td>
              <td class="form-label"><span>考试结束时间：</span></td>
              <td class="form-item">
                <el-date-picker v-model="clazzDialog.endDate"
                                type="date"
                                size="mini"
                                style="width:18vh;"
                                placeholder="选择日期">
                </el-date-picker>
                <span style="display:inline-block;width:4vh;"></span>
                <el-time-select size="mini"
                                style="width:15vh;"
                                v-model="clazzDialog.endTime"
                                :picker-options="{
        start: '08:00',
        step: '00:10',
        end: '20:30'
      }"
                                placeholder="选择时间">
                </el-time-select>
              </td>
            </tr>
          </table>
        </el-form>
        <div slot="footer">
          <el-button plain
                     style="width:100px;height:28px;"
                     type="warning"
                     @click="clazzDialog.dialogVisible = false">保存</el-button>
          <span style="display:inline-block;width:80px;"></span>
          <el-button plain
                     style="width:100px;height:28px;"
                     type="danger"
                     @click="clazzDialog.dialogVisible = false">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-show="!StartExaminationShow">
      <div class="startformbox">
        <p>登录学号</p>
        <el-input v-model="resultPagin.totalCount"
                  style="width:300px"
                  class="stinput"
                  placeholder=""></el-input>
        <p>学生姓名</p>
        <el-input v-model="resultPagin.totalCount"
                  style="width:300px"
                  class="stinput"
                  placeholder=""></el-input>
        <div class="startform">
          <el-button type="warning"
                     :plain=true
                     @click="EnterTheExam">
            进入考试
          </el-button>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      StartExaminationShow: true,
      semesterArray: [
        { label: '2021下', value: '2021下' },
        { label: '2022上', value: '2022上' },
      ],
      queryForm: {
        semester: '',
        name: '',
      },
      resultPagin: {
        totalCount: 200,
        currentPage: 3,
        perPageCount: 50,
        start: 51,
        end: 100,
      },
      tableData: [{}, {}, {}],
      clazzDialog: {
        dialogTitle: '添加在线考试',
        dialogVisible: false,
        startDate: '',
        startTime: '',
        endDate: '',
        endTime: '',
      },
    }
  },
  methods: {
    StartExamination() {
      this.StartExaminationShow = false
    },
    EnterTheExam() {
      this.$router.push({ name: '开始考试' })
    },
  },
}
</script>

<style lang="less" scoped>
@import './courseAssessment.less';
</style>
<style lang="less" scoped>
.pagineDescPane {
  padding: 10px 0px 0px 0px;
  font-size: 14px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
}
.pagineBtnPane {
  text-align: right;
  padding: 10px;
  font-size: 14px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
}
.pagineBtnPane > button {
  color: #004ca7;
  width: 30px;
  height: 28px;
  padding-left: 0px;
  padding-right: 0px;
  border: 1px solid #004ca7;
}
td.form-label {
  background-color: #edf2f9;
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  line-height: 50px;
  width: 20%;
  text-align: center;
}
td.form-item {
  background-color: #ffffff;
  color: #004ca7;
  font-size: 16px;
  line-height: 50px;
  width: 30%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}
.startformbox {
  text-align: center;
  margin-top: 200px;
  p {
    color: #004ca7;
    font-weight: 800;
    margin-top: 30px;
  }
}
.startform {
  margin-top: 70px;
}
@import './courseAssessmentScoped.less';
</style>
